<script>
	import { interpolateString as interpolate } from 'd3-interpolate';
	import { tweened } from 'svelte/motion';

	import Grid from './Grid.svelte';
	import Controls from './Controls.svelte';

	import { eases, types } from './eases.js';

	let current_type = 'In';
	let current_ease = 'sine';
	let duration = 2000;
	let current = eases.get(current_ease)[current_type];
	let playing = false;
	let width;

	const ease_path = tweened(current.shape, { interpolate });
	const time = tweened(0);
	const value = tweened(1000);

	async function runAnimations() {
		playing = true;

		value.set(1000, { duration: 0 });
		time.set(0, { duration: 0 });

		await ease_path.set(current.shape);
		await Promise.all([
			time.set(1000, { duration, easing: (x) => x }),
			value.set(0, { duration, easing: current.fn })
		]);

		playing = false;
	}

	$: current = eases.get(current_ease)[current_type];
	$: current && runAnimations();
</script>

<div bind:offsetWidth={width} class="easing-vis">
	<svg viewBox="0 0 1400 1802">
		<g class="canvas">
			<Grid x={$time} y={$value} />
			<g class="graph">
				<path d={$ease_path} stroke="#333" stroke-width="2" fill="none" />

				<path
					d="M0,23.647C0,22.41 27.014,0.407 28.496,0.025C29.978,-0.357 69.188,3.744 70.104,4.744C71.02,5.745 71.02,41.499 70.104,42.5C69.188,43.501 29.978,47.601 28.496,47.219C27.014,46.837 0,24.884 0,23.647Z"
					fill="#ff3e00"
					style="transform: translate(1060px, {$value - 24}px)"
				/>

				<circle cx={$time} cy={$value} r="15" fill="#ff3e00" />
			</g>
		</g>
	</svg>

	<Controls
		{eases}
		{types}
		{playing}
		{width}
		bind:duration
		bind:current_ease
		bind:current_type
		on:play={runAnimations}
	/>
</div>

<style>
	.easing-vis {
		display: flex;
		max-height: 95%;
		max-width: 800px;
		margin: auto;
		border: 1px solid #333;
		border-radius: 2px;
		padding: 20px;
	}

	svg {
		width: 100%;
		margin: 0 20px 0 0;
	}

	.graph {
		transform: translate(200px, 400px);
	}

	@media (max-width: 600px) {
		.easing-vis {
			flex-direction: column;
			max-height: calc(100% - 3rem);
		}
	}
</style>

<script>
	import { fade, blur, fly, slide, scale } from "svelte/transition";
	import { bounceOut, sineOut } from "svelte/easing";
	import { browser } from "$app/environment";
	const data = [
		{ title: "Hall", items: ["Sweep the floor", "Mop the floor", "Throw the rubbish"] },
		{ title: "Kitchen", items: ["Wash the plates", "Tidy the table", "Boil the soup"] },
		{ title: "Toilet", items: ["Brush the sink", "Flush the toilet", "Scrub the floors"] },
	];
	let lists = [
		{ show: true, items: [0, 1] },
		{ show: false, items: [0] },
		{ show: false, items: [0, 1] },
	];
	let media;
	let noAnimation;
	if (browser) {
		media = matchMedia("(prefers-reduced-motion: reduce)");
		noAnimation = media.matches;
		media.onchange = (event) => {
			noAnimation = event.matches;
		};
	}

	function t() {
		return {
			delay: 0,
		};
	}

	$: niceFade = noAnimation ? t : fade;
</script>

<div class="containery">
	{#each lists as list, i (i)}
		{#if list.show}
			<div
				transition:niceFade={{ duration: 400 }}
				on:introend={() => {
					list.shown = true;
				}}
				on:outroend={() => {
					list.shown = false;
				}}
				class="list">
				<div class="title">{data[i].title}</div>
				<button class="close" on:click={() => (list.show = false)}>X</button>
				<ul class="items">
					{#each list.items as item, index (item)}
						<li
							in:fly|global={{
								x: 120,
								delay: list.shown ? 0 : 400 + index * 300,
								easing: bounceOut,
								duration: 1500,
							}}
							out:slide
							class="item">
							<button
								on:click={() => {
									list.items = list.items.filter((i) => i !== item);
								}}>
								<span>{data[i].items[item]}</span><span class="pl-4">X</span></button>
						</li>
					{/each}
					{#if list.items.length !== 3}
						<button
							class="add-item"
							on:click={() => {
								const potential = new Set([0, 1, 2]);
								list.items.forEach((item) => potential.delete(item));
								list.items.push(Array.from(potential)[0]);
								list.items = list.items;
							}}>
							Add item
						</button>
					{/if}
				</ul>
			</div>
		{:else}
			<button class="add-list" on:click={() => (list.show = true)}>+</button>
		{/if}
	{/each}
</div>

<style>
	.containery {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	.list,
	.add-list {
		margin: 20px;
		border: 1px solid #999;
		border-radius: 4px;
		padding: 20px;
		box-shadow: 4px 4px 4px #ddd;
		position: relative;
	}
	.title {
		font-size: 18px;
		font-weight: bold;
	}
	.close {
		position: absolute;
		top: 10px;
		right: 10px;
		background: none;
		border: none;
		cursor: pointer;
	}
	.items {
		list-style: none;
		padding: 0;
		height: 250px;
	}
	.items li {
		margin-bottom: 16px;
		padding: 8px;
		border: 1px solid #999;
		border-radius: 4px;
		box-shadow: 2px 2px 2px #ddd;
		transition: all 0.5s ease;
	}
	.items li:hover {
		box-shadow: 4px 4px 4px #ddd;
	}
	.item {
		display: flex;
	}
	.item span:first-child {
		flex: 1;
	}
	.add-list {
		display: grid;
		place-items: center;
		font-size: 100px;
		cursor: pointer;
		background: rgba(0, 0, 255, 0.05);
		color: blue;
		border: none;
		box-shadow: none;
	}
	.items li.add-item {
		border: none;
		background: none;
		box-shadow: none;
		color: blue;
		text-align: center;
		background: rgba(0, 0, 255, 0.05);
	}
</style>